<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>新的模板</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            1.Vue中的数据代理:
                通过vm对象来代理data对象中属性的操作(读/写)
            2.Vue中数据代理的好处:
                更加方便的操作data中的数据
            3.基本原理：
                通过Object.defineProperty()把data对象中的所有属性添加到vm上
                为每一个添加到m上的属性,都指定一个getter/setter
                在getter/setter内部去操作(读/写) data中对应的属性
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。

            const vm =  new Vue({
                el: '#root'
                ,data:{
                    name:'泛华金融',
                    address:'高德置地冬'
                }
            })

        </script>
    </body>
</html>